<template>
    <div class="login">
        <el-form :model="loginForm" ref="loginForm" :rules="loginFormRules">
            <el-form-item prop="mobile">
                <el-input v-model="loginForm.mobile" placeholder="手机号" class="font-big">
                    <i slot="prefix" class="login-icon el-icon-phone"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" placeholder="密码" class="font-big" type="password">
                    <i slot="prefix" class="el-icon-phone"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="remember">
                <div class="login-space-between">
                    <el-checkbox v-model="loginForm.remember">自动登录</el-checkbox>
                    <el-button type="text" @click="$router.push({ name: 'findPwd' })">忘记密码</el-button>
                </div>
            </el-form-item>
            <el-button type="primary" class="login-btn" @click="login">登录</el-button>
        </el-form>

    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'LoginComponent',
        data() {
            const checkMobile = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('Please enter user name!'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };

            return {
                loginForm: {
                    mobile: "",
                    password: "",
                    remember: false
                },
                loginFormRules: {
                    mobile: [{
                        required: true,
                        validator: checkMobile,
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: 'Please enter password!',
                        trigger: 'blur'
                    }]
                },
                pwdWrong: true,
                wrongMsg: "111"
            }
        },
        methods: {
            login() {
                this.$message.error('账号或者密码错误')
            }
        },
        created() {
        },
        mounted() {
        },
    }

</script>
<style rel="stylesheet/scss" lang="scss">
    .login {
        .el-input {
            border-radius: 4px;
        }
        &-space-between {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-flow: row nowrap;
        }
        &-btn {
            width: 100%;
        }
    }
</style>
